<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="index"
        label="编号"
        width="80">
      </el-table-column>
      <el-table-column
        prop="examineTarget"
        label="考核目标">
      </el-table-column>
      <el-table-column
        prop="examineScore"
        label="分值"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="examineDrop"
        label="考核要点">
      </el-table-column>
      <el-table-column
        prop="examineStandard"
        label="评价标准说明">
      </el-table-column>
      <el-table-column
        prop="examineDropScore"
        label="分值"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="deductPoints"
        label="扣分"
        width="160"
        v-if="type=='fill'"
      >
        <template slot-scope="scope">
          <el-input-number controls-position="right" @change="(value) => handleChange(value,scope)" style="width:100px" v-model="scope.row.deductPoints" placeholder="请输入扣分"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="score"
        label="得分"
        width="120"
        v-if="type=='fill'"
      >
      </el-table-column>
      <el-table-column
        prop="score"
        label="操作"
        width="140"
        v-if="type=='add'"
      >
      <template slot-scope="scope">
        <div class="table-button">
          <el-button type="text" @click="() => updateItems(scope)">编辑</el-button>
          <el-button type="text" @click="() => deleteItems(scope.row)">删除</el-button>
        </div>
      </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    props:['info','type'],
    data() {
      return {
        tableData:[],
        spanArr: [], // 保存合并的数据
      };
    },
    watch:{
      'info.examineDropList': {
        handler(newVal,oldVal){
          console.log('newVal',newVal,oldVal);
          if(newVal!==oldVal){
            this.tableData=newVal.map((_,ind) => {
              return {
                ..._,
                index:ind+1,
                deductPoints:0,
                score:_.examineDropScore,
              }
            });
            this.mergeData();
            console.log('this.tableData',this.tableData);         
          }
        },
        deep: true,
        immediate: true
      },
    },
    methods: {
      mergeData(){
        this.spanArr=[];
        let contactDot=0;
        this.tableData.forEach((_,index) => {
          if(index === 0){
            this.spanArr.push(1);
          }else{
            if(_.examineTarget == this.tableData[index-1].examineTarget){
              this.spanArr[contactDot]+=1;
              this.spanArr.push(0);
            }else{
              contactDot=index;
              this.spanArr.push(1);
            }
          }
        })
        console.log('this.spanArr',this.spanArr)
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {   
        // 只对第1，2列进行合并
        let spanCol=this.type=='add'?[1,2,6]:[1,2];
        if(spanCol.includes(columnIndex)){
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }else {
         return {
           rowspan: 1,
           colspan: 1
         }
       }
      },
      updateItems(data){
        console.log('编辑数据',data);
        let ls=this.tableData.filter(_ => _.examineTarget==data.row.examineTarget);
        let params={
          ele:data.row.examineTarget,
          type:'update',
          updatedIndex:data.$index,
          editItemsLength:ls&&ls.length>0?ls.length:0,
        };
        this.$emit('updateExamineItems',params);
      },
      deleteItems(row){
        let params={
          ele:row.examineTarget,
          type:'delete'
        };
        console.log('row',row,row.examineTarget);
        this.$emit('updateExamineItems',params);
      },
      handleChange(val,data){
        console.log('扣分',val,data);  
        let score=data.row.examineDropScore - val; 
        this.tableData[data.$index].score= score;
        console.log('score',score,this.tableData);
      }
    }
  }
</script>
<style lang="scss" scoped>
  .table-button{
    .el-button{
      min-width:auto !important;
      font-size:14px !important;
    }
  }
</style>